<template>
  <div>
    <h2>销售数量</h2>
    <div class="chart" id="oneChart">图表容器1</div>
  </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");

    let data = reactive({});
    let xdata = reactive({});
    let ydata = reactive({});

    function setData() {
      xdata = data.data.chartData.chartData.map((v) => v.title);
      ydata = data.data.chartData.chartData.map((v) => v.num);
      // console.log(xdata,ydata)
    }
    async function getState() {
      data = await $http({ url: "/one/data" });
    }

    onMounted(() => {
      let mychart = $echarts.init(document.getElementById("oneChart"));
      // 调用请求
      getState().then(() => {
        setData();
        mychart.setOption({
          grid:{
            top:"1%",
            left:"1%",
            right:"4%",
            bottom:"14%",
            containLabel:true
          },
          xAxis: {
            type: "value",
            axisLine:{
              lineStyle:{
                color:"#fff"
              }
            }
          },
          yAxis: {
            type: "category",
            data: xdata,
            axisLine:{
              lineStyle:{
                color:"#fff"
              }
            }
          },
          tooltip:{
          show:true
       },
          series: [
            {
              type: "bar",
              data: ydata,
              itemStyle: {
                normal: {
                  barBorderRadius:[0,20,20,0],
                  color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#005eaa"
                  },{
                    offset:0.5,
                    color:"#339ca8"
                  },{
                    offset:1,
                    color:"#cda819"
                  }]),
                },
              },
            },
          ],
        });
      });
    });
    return {
      getState,
      data,
      xdata,
      ydata,
      setData,
    };
  },
};
</script>

<style scoped>
.chart {
  height: 360px;
}
h2 {
  height: 40px;
  color: #fff;
  line-height: 44px;
  font-size: 0.375rem;
  text-align: center;
}
</style>
